<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-form ref="queryParams" :model="queryParams" size="small" :inline="true" label-width="70px">
          <el-form-item label="房间ID">
            <el-input v-model="queryParams.id" placeholder="请输入房间id" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.status" placeholder="请选择房间状态">
              <el-option v-for="item in roomType" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择时间">
            <el-date-picker v-model="tiemValue" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitsear" icon="el-icon-search" size="mini">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- 列表 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%" class="mb20">
        <el-table-column prop="id" label="ID" align="center" width="70">
        </el-table-column>
        <el-table-column prop="capsuleInfoId" label="基地ID" align="center" width="70">
        </el-table-column>
        <el-table-column prop="capsuleRoomId" label="房间ID" align="center" width="70">
        </el-table-column>
        <el-table-column prop="capsuleInfoTitle" label="名称" align="center" width="240">
        </el-table-column>
        <el-table-column prop="capsuleRoomName" label="太空舱房间" align="center">
        </el-table-column>
        <el-table-column prop="lockNum" label="房间密码" align="center">
        </el-table-column>
        <el-table-column prop="keyboardPwd" label="临时密码" align="center">
        </el-table-column>
        <el-table-column prop="openPwdType" label="密码锁类型" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.openPwdType == 0 ? '远程开锁' : '密码开锁'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="lockPwdType" label="请求类型" align="center" width="80">
        </el-table-column>
        <el-table-column prop="requestTime" label="请求时间" align="center" width="160">
        </el-table-column>
        <el-table-column prop="subSource" label="请求来源" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.subSource == 0 ? 'PC端' : '小程序'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.status == 0 ? '正常' : '删除'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="160">
        </el-table-column>
      </el-table>
      <el-pagination background align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum" :page-size="queryParams.pageSize"
        layout="prev, pager, next" :total="total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
  import {
    getRoomLockRecords
  } from '@/api/order/order'
  export default {
    data() {
      return {
        loading: true,
        queryParams: {
          status:''
        },
        roomType: [{
            value: 0,
            label: '正常'
          },
          {
            value: 1,
            label: '停用'
          },
          {
            value: 99,
            label: '全部'
          }
        ],
        total: 0,
        fromData: {
          pageNum: 1,
          pageSize: 10,
          id: '',
          createBeginTime: '',
          createEndTime: '',
          status: '99'
        },
        tableData: [],
        tiemValue: ''
      }
    },
    created() {
      this.fromData.id = this.$route.query.id
      this.getList()
    },
    methods: {
      getList() {
        getRoomLockRecords(this.fromData).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.rows
            this.loading = false
            this.total = res.data.total
          }
        })
      },
      handleSizeChange(val) {
        this.queryParams.pageNum = val
        this.fromData.pageNum = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.fromData.pageNum = val
        this.getList()
      },
      onSubmitsear() {
        this.fromData = {
          pageNum:1,
          pageSize:10,
          id:this.queryParams.id,
          status:this.queryParams.status ? this.queryParams.status :'99'
        }
        if (this.tiemValue && this.tiemValue.length > 0) {
          this.fromData.createBeginTime = this.tiemValue[0]
          this.fromData.createEndTime = this.tiemValue[1]
        } else {
          this.fromData.createBeginTime = ''
          this.fromData.createEndTime = ''
        }
        this.getList()
      },
      resetQuery() {
        this.fromData = {
          pageNum: 1,
          pageSize: 10,
          id: this.$route.query.id,
          createBeginTime: '',
          createEndTime: '',
          status: '99'
        },
        this.getList()
      }
    }
  }
</script>

<style>
</style>
